import React, {useState, useEffect} from 'react'
import '../public/style/components/header.css'
import { Row, Col, Menu } from 'antd'
import Router from 'next/router'
import Link from 'antd'
import axios from 'axios'
import servicePath from '../config/apiUrl'
import {
  HomeOutlined,
  YoutubeOutlined,
  SmileOutlined
} from '@ant-design/icons';

const Header = () => {

  const [navArray, setnavArray] = useState([])
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(servicePath.getTypeInfo).then(
        (res)=>{
          return res.data.data
        }
      )
      // console.log(result);
      setnavArray(result)
    }
    fetchData()
  }, [])

  const handleClick = (e) => {
    // console.log(e.key);
    if(e.key==0){
      Router.push('/index')
    }else{
      Router.push('/list?id=' + e.key)
    }
  }

  return (
    <div className="header">
        <Row type="flex" justify="center">
            <Col xs={24} sm={24} md={10} lg={15} xl={12}>
                <span className="header-logo">ZZJ</span>
                <span className="header-txt">欢迎来到zzj的博客</span>
            </Col>
            <Col xs={0} sm={0} md={14} lg={8} xl={6}>
                <Menu mode="horizontal" onClick={handleClick}>
                  <Menu.Item key="0">
                    <HomeOutlined />
                    首页
                  </Menu.Item>
                  {/* {
                    navArray.map((item)=>{
                      return (
                        <Menu.Item key={item.Id}>
                          <YoutubeOutlined />
                          {item.typeName}
                        </Menu.Item>
                      )
                    })
                  } */}
                  <Menu.Item key="1">
                  <YoutubeOutlined />
                    视频
                  </Menu.Item>
                  <Menu.Item key="2">
                  <SmileOutlined />
                    生活
                  </Menu.Item>
                </Menu>
            </Col>
        </Row>
    </div>
  )
}

export default Header